let cityPicker = {
    province:selet("#province"),
    city:selet("#city"),
    area:selet("#area"),
    // 更新城市数据
    updateCity(index){
        var index = index || 0;
        this.city.innerHTML = "";
        citys[index].mallCityList.forEach(item=>{
            let option = document.createElement("option");
            option.innerHTML = item.cityName;
            this.city.appendChild(option)
        })
    },
    // 更新区数据
    updateArea(provinceIndex,cityIndex){
        area.innerHTML = "";
        citys[provinceIndex].mallCityList[cityIndex].mallAreaList.forEach(item=>{
            let option = document.createElement("option");
            option.innerHTML = item.areaName;
            area.appendChild(option)
        })
    },
    // 初始化
    init(){
        // 初始化数据
        citys.forEach(item=>{
            let option = document.createElement("option");
            option.innerHTML = item.provinceName;
            this.province.appendChild(option)
        })
        this.updateCity(0)
        this.updateArea(0,0)
        // onchange事件当值发生改变的时候触发的事件
        // 只属于文本框，密码框，文本域与下拉选择菜单
        // selectedIndex属性：下拉选择菜单的Node节点独有的属性
        // 代表当前选择的选择项相对于其他选择项所处的下标
        this.province.onchange = ()=>{
            this.updateCity(this.province.selectedIndex)
            this.updateArea(this.province.selectedIndex,this.city.selectedIndex)
        }
        this.city.onchange = ()=>{
            this.updateArea(this.province.selectedIndex,this.city.selectedIndex)
        }
    }
  }
  
  cityPicker.init()